<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="content.css">
	
</head>
<body>
	<!-- top导航 -->
	<div class="top-bar">
		<span class="modus">MODUS</span>VERSUS
	
		<ul>
		<li><button class="search"></button></li>
		<li><a  class="top-bar-a" href="#">CONTACTS</a></li>
		<li><a class="top-bar-a"  href="#">FEATURES</a></li>
		<li><a class="top-bar-a"  href="#">BLOG</a></li>
		<li><a id="top_bar_a" class="top-bar-a" href="#" onmouseover=showDiv() onmouseout=showdown()>∨ PORTFOLIO</a>
		<div class="show-div" id="showButton">
			<a href="#">Portfolio 2 column page</a>
			<a href="#">Portfolio 2 column page</a>
			<a href="#">Portfolio 2 column page</a>
		</div>
		</li>
		<li><a  class="top-bar-a" href="#">SERVICES</a></li>
		<li><a  class="top-bar-a" href="#">ABOUT</a></li>
		<li class="home"><a href="#" >HOME</a></li>
		</ul>
		<div class="path-index"></div>
	</div>

<!-- 文字部分 -->
<div class="about-us">
	<h2>PORTFOLIO</h2>
	<p><span>Home </span>  /  <span>Blog</span>     /   <span>portfolio</span> </p>	
</div>
<!-- content -->
<div style="width: 100%;height:4900px;background: #F3F3F3;">
<div class="big-div" style="width: 80%;height: 4900px;background: #F3F3F3;">
			<!-- 图片展现 -->
	<div id="container">
		<div id="imglist">
			<div class="slidpic" style="display: none; opacity: 0;">
				<a href="#"><img src="img/001.jpg" width="100%" height="500px"></a>	
			</div>
			<div class="slidpic" style="display: block; opacity: 1;">
				<a href="#"><img src="img/002.jpg" width="100%" height="500px"></a>
			</div>
			<div class="slidpic" style="display: none; opacity: 0;">
				<a href="#"><img src="img/003.jpg" width="100%" height="500px"></a>
			</div>		
		</div>
		<div id="buttons">
			<i id="prev">&lt;&lt;</i>
			<i id="next">&gt;&gt;</i>
		</div>
			
	</div>
    <ul id="slidot">
			<li class=""></li>
			<li class="on"></li>
			<li class=""></li>
	</ul>
		
	<div class="pics">	
		<div class="pics-left">
			<div id="container1"> 
				<div id="imglist1">
					<div class="slidpic1" style="display: none; opacity: 0;">
					<a href="#"><img src="img/001.jpg" width="100%" height="500px"></a>	
					</div>
					<div class="slidpic1" style="display: block; opacity: 1;">
					<a href="#"><img src="img/002.jpg" width="100%" height="500px"></a>
					</div>
					<div class="slidpic1" style="display: none; opacity: 0;">
					<a href="#"><img src="img/003.jpg" width="100%" height="500px"></a>
					</div>		
				</div>
				<div id="buttons1">
				<i id="prev1">&lt;&lt;</i>
				<i id="next1">&gt;&gt;</i>
				</div>
			
			</div> 
			<ul id="slidot1">
				<li class=""></li>
				<li class="on1"></li>
				<li class=""></li>
			</ul>
		</div>
			
		<div class="pics-right">
			<div id="container2"> 
				<div id="imglist2">
					<div class="slidpic2" style="display: none; opacity: 0;">
					<a href="#"><img src="img/001.jpg" width="100%" height="200px"></a>	
					</div>
					<div class="slidpic2" style="display: block; opacity: 1;">
					<a href="#"><img src="img/002.jpg" width="100%" height="200px"></a>
					</div>
					<div class="slidpic2" style="display: none; opacity: 0;">
					<a href="#"><img src="img/003.jpg" width="100%" height="200px"></a>
					</div>		
				</div>
				<div id="buttons2">
				<i id="prev2">&lt;&lt;</i>
				<i id="next2">&gt;&gt;</i>
				</div>

			</div>
			<ul id="slidot2">
				<li class=""></li>
				<li class="on2"></li>
				<li class=""></li>
			</ul>
		
		<div class="pics-divs">
			<h3>SIDEBAR GALLERY</h3>
			<div class="pics-div">
					<img src="img/003.jpg" width="28%" height="70px;">
					<img src="img/003.jpg" width="28%" height="70px;">
					<img src="img/003.jpg" width="28%" height="70px;">
					<img src="img/003.jpg" width="28%" height="70px;">
					<img src="img/003.jpg" width="28%" height="70px;">
					<img src="img/003.jpg" width="28%" height="70px;">
			</div>
		</div>
	</div>
	</div>

		<div class="read-more">
			<div class="read-more-div susp" style="background: #fff;">
				<img src="img/大拇指.png">
				<span>SUSPENDISSE</span>
				<p>gjfkjdf sgkg kljdfofr i r eo t jdgkjd s kfjdjkc jgvkjfgkjg jkfgt ben j nfjds n nfdmnf mdk fnd  nf nd  nmdfn n dnfndf df  njdnfn njd n</p>
				<button style="background: #E2534B;">read more</button>
			</div>
			<div class="read-more-div mae">
				<img src="img/钥匙.png">
				<span>MAECENAS</span>
				<p>g jfkjd sgkgklj dfofrireot jdgkj dskfjdj kcjgv kjf gkjgjk</p>
				<button>read more</button>			
			</div>
			<div class="read-more-div ali">
				<img src="img/旗帜.png">
				<span>ALIQUAM</span>
				<p>gjf kjdsgk gkljdfo frireotjd gkjd skfjd jkcjgvk jfgkj gkm m mkm mflekr gjk</p>
				<button>read more</button>
			</div>
			<div class="read-more-div hab"><img src="img/水晶瓶.png"><span>HABITASSE</span>
			<p>gjf kjdsgkgk ljdfofr ireotjd gkjdskfj djk cjg vkjfgk j jfdoauer erjfhjh gjk</p>
			<button>read more</button>
			</div>
		</div>

		<div class="jh-div">
			<div class="jh-left">
				<h2 class="jh-left-h2">ACJKSDWIHSBC <span>⊕</span></h2>
				<h2 class="jh-left-h2">ACJKSDWIHSBC <span>⊕</span></h2>
				<div><h2>ACJKSDWIHSBC <span>Θ</span></h2><p>Vivamus eget ante bibendum arcu vehicula ultricies. Integer venenatis mattis nisl, vitae pulvinar dui tempor.Ut eleifend libero sed neque rhoncus consequat. Maecenas tincidunt, augue et rutrum condimentum, libero lectus mattis orci, ut commodo.</p>
				<</div>
			</div>
			<div class="jh-right">
				<h2 class="jh-left-h2">ACJKSDWIHSBC <span>⊕</span></h2>
				<h2 class="jh-left-h2">ACJKSDWIHSBC <span>⊕</span></h2>
				<div><h2>ACJKSDWIHSBC <span>Θ</span></h2><p>Vivamus eget ante bibendum arcu vehicula ultricies. Integer venenatis mattis nisl, vitae pulvinar dui tempor.Ut eleifend libero sed neque rhoncus consequat. Ma</p>
				<</div>
			</div>
		</div>

		<div class="tab-div">
			<div class="tab-left">
				<div><i class="on01">TAB TITLE</i><i class="">TAB TITLE</i><i class="">TAB TITLE</i><i class="">TAB TITLE</i></div>	
				<p>  Vivamus eget ante bibendum arcu vehicula ultricies. Integer venenatis mattis nisl, vitae pulvinar dui tempor.Ut eleifend libero sed neque rhoncus consequat. Maecenas tincidunt, augue et rutrum condimentum, libero lectus mattis orci, ut commodo. Vivamus eget ante bibendum arcu vehicula ultricies. Integer venenatis mattis nisl, vitae pulvinar dui tempor.Ut eleifend libero sed neque rhoncus consequat.</p>
			</div>

			<div class="tab-right"><i class="on01">TAB TITLE</i><i class="">TAB TITLE</i>
			<p>Vivamus eget ante bibendum arcu vehicula ultricies. Integer venenatis mattis nisl, vitae pulvinar dui tempor.Ut eleifend libero sed neque rhoncus consequat. Maecenas </p></div>
		</div>
		
		<div class="picts">
		<div><p><img src="img/eyes.png"><img src="img/gmail.png"></p>
		<span>Learn ipdnfdf</span></div>
		<div><p><img src="img/eyes.png"><img src="img/gmail.png"></p>
		<span>Learn ipdnfdf</span></div>
		<div><p><img src="img/eyes.png"><img src="img/gmail.png"></p>
		<span>Learn ipdnfdf</span></div>
		<div><p><img src="img/eyes.png"><img src="img/gmail.png"></p>
		<span>Learn ipdnfdf</span></div>
		</div>
		
		<div class="picts-big">
		<div><p><img src="img/eyes.png"><img src="img/gmail.png"></p>
		<span>Learn ipdnfdf</span></div>
		<div><p><img src="img/eyes.png"><img src="img/gmail.png"></p>
		<span>Learn ipdnfdf</span></div>
		</div>
	
	<div class="ps-div">
		<div class="ps-01">
			<h2>Headline</h2>
			<p>Duis dapibus aliquam mi, eget euismod sem scelerisque ut. Vivamus at elit quis urna adipiscing iaculis. Curabitur vitae velit in neque dictum blandit. Proin in iaculis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur vitae velit in neque dictum blandit. Proin in iaculis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
		</div>
		<div class="ps-02">
			<div><h2>Headline</h2>
			<p>Duis dapibus aliquam mi, eget euismod sem scelerisque ut. Vivamus at elit quis urna adipiscing iaculis. Curabitur vitae velit in neque dictum blandit. Proin in iaculis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur vitae velit in neque dictum blandit. Proin in iaculis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p></div>
			<div><h2>Headline</h2>
			<p>Duis dapibus aliquam mi, eget euismod sem scelerisque ut. Vivamus at elit quis urna adipiscing iaculis. Curabitur vitae velit in neque dictum blandit. Proin in iaculis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur vitae velit in neque dictum blandit. Proin in iaculis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p></div>
		</div>
		<div class="ps-03">
			<div class="ps-03-01"><h2>Headline</h2>
			<p>Duis dapibus aliquam mi, eget euismod sem scelerisque ut. Vivamus at elit quis urna adipiscing iaculis. Curabitur vitae velit in neque dictum blandit. Proin in iaculis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur vitae velit in neque dictum blandit. Proin in iaculis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p></div>
			<div class="ps-03-02"><h2>Headline</h2>
			<p>Duis dapibus aliquam mi, eget euismod sem scelerisque ut. Vivamus at elit quis urna adipiscing iaculis. Curabitur vitae velit in neque dictum blandit. Proin in iaculis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur vitae velit in neque dictum blandit. Proin in iaculis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p></div>
		</div>
		<div class="ps-04">
			<div><h2>Headline</h2>
			<p>Duis dapibus aliquam mi, eget euismod sem scelerisque ut. Vivamus at elit quis urna adipiscing iaculis. Curabitur vitae velit in neque dictum blandit. Proin in iaculis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur vitae velit in neque dictum blandit. Proin in iaculis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p></div>
			<div><h2>Headline</h2>
			<p>Duis dapibus aliquam mi, eget euismod sem scelerisque ut. Vivamus at elit quis urna adipiscing iaculis. Curabitur vitae velit in neque dictum blandit. Proin in iaculis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur vitae velit in neque dictum blandit. Proin in iaculis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p></div>
			<div><h2>Headline</h2>
			<p>Duis dapibus aliquam mi, eget euismod sem scelerisque ut. Vivamus at elit quis urna adipiscing iaculis. Curabitur vitae velit in neque dictum blandit. Proin in iaculis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur vitae velit in neque dictum blandit. Proin in iaculis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p></div>
			<div><h2>Headline</h2>
			<p>Duis dapibus aliquam mi, eget euismod sem scelerisque ut. Vivamus at elit quis urna adipiscing iaculis. Curabitur vitae velit in neque dictum blandit. Proin in iaculis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur vitae velit in neque dictum blandit. Proin in iaculis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p></div>
		</div>
	</div>

	<div class="as-div">
		<div><h2>ARROWs dkfn lisnd xldmso </h2>
			<a href="#"><span>➜</span> Qusdtiong sdjn afhoen nsdkhwo sne</a>
			<a href="#"><span>➜</span> Qusdtiong sdjn afhoen nsdkhwo sne</a>
			<a href="#"><span>➜</span> Qusdtiong sdjn afhoen nsdkhwo sne</a>
			<a href="#"><span>➜</span> Qusdtiong sdjn afhoen nsdkhwo sne</a>
			<a href="#"><span>➜</span> Qusdtiong sdjn afhoen nsdkhwo sne</a>
			<a href="#"><span>➜</span> Qusdtiong sdjn afhoen nsdkhwo sne</a>
		</div>
		<div><h2>ARROWs dkfn lisnd xldmso </h2>
			<a href="#"><span>➜</span> Qusdtiong sdjn afhoen nsdkhwo sne</a>
			<a href="#"><span>➜</span> Qusdtiong sdjn afhoen nsdkhwo sne</a>
			<a href="#"><span>➜</span> Qusdtiong sdjn afhoen nsdkhwo sne</a>
			<a href="#"><span>➜</span> Qusdtiong sdjn afhoen nsdkhwo sne</a>
			<a href="#"><span>➜</span> Qusdtiong sdjn afhoen nsdkhwo sne</a>
			<a href="#"><span>➜</span> Qusdtiong sdjn afhoen nsdkhwo sne</a>
		</div>
		<div><h2>ARROWs dkfn lisnd xldmso </h2>
			<a href="#"><span>➜</span> Qusdtiong sdjn afhoen nsdkhwo sne</a>
			<a href="#"><span>➜</span> Qusdtiong sdjn afhoen nsdkhwo sne</a>
			<a href="#"><span>➜</span> Qusdtiong sdjn afhoen nsdkhwo sne</a>
			<a href="#"><span>➜</span> Qusdtiong sdjn afhoen nsdkhwo sne</a>
			<a href="#"><span>➜</span> Qusdtiong sdjn afhoen nsdkhwo sne</a>
			<a href="#"><span>➜</span> Qusdtiong sdjn afhoen nsdkhwo sne</a>
		</div>
		<div class="as-div-div"><h2>ARROWs dkfn lisnd xldmso </h2>
			<a href="#"><span>➜</span> Qusdtiong sdjn afhoen nsdkhwo sne</a>
			<a href="#"><span>➜</span> Qusdtiong sdjn afhoen nsdkhwo sne</a>
			<a href="#"><span>➜</span> Qusdtiong sdjn afhoen nsdkhwo sne</a>
			<a href="#"><span>➜</span> Qusdtiong sdjn afhoen nsdkhwo sne</a>
			<a href="#"><span>➜</span> Qusdtiong sdjn afhoen nsdkhwo sne</a>
			<a href="#"><span>➜</span> Qusdtiong sdjn afhoen nsdkhwo sne</a>
		</div>
	</div>
	<div class="hdline">
		<div><H2>Headline</H2>
		<p>dfwe88 udjnksl cjhg xkl;po[098yfgch bnklm;iouyt dsfghjkl [p0-dfg bfdhb dffdhbg v b 985tsrfg</p></div>
		<i>VIEW MORE</i>
	</div>

	<div class="big-table">
		<table>
			<tr class="first-td">
				<td>TR TITLE</td><td>TR TITLE</td><td>TR TITLE</td><td>TR TITLE</td>
			</tr>
			<tr>
				<td>Quisque </td><td>Maecenas a lorem augue</td><td>Etiam auctor diam pellentesque ulla ac massa at dolor</td><td>Maecenas a lorem augue</td>
			</tr>
			<tr>
				<td>Quisque </td><td>Maecenas a lorem augue</td><td>Etiam auctor diam pellentesque ulla ac massa at dolor</td><td>Maecenas a lorem augue</td>
			</tr>
			<tr>
				<td>Quisque </td><td>Maecenas a lorem augue</td><td>Etiam auctor diam pellentesque ulla ac massa at dolor</td><td>Maecenas a lorem augue</td>
			</tr>
			<tr>
				<td>Quisque </td><td>Maecenas a lorem augue</td><td>Etiam auctor diam pellentesque ulla ac massa at dolor</td><td>Maecenas a lorem augue</td>
			</tr>
		</table>
	</div>
	<div class="small-table">
		<table class="left-table">
			<tr class="first-left">
				<td>TR TITLE</td><td>TR TITLE</td><td>TR TITLE</td><td>TR TITLE</td>
			</tr>
			<tr>
				<td>Quisque </td><td>Maecenas a lorem augue</td><td>Etiam auctor diam pellentesque ulla ac massa at dolor</td><td>Maecenas a lorem augue</td>
			</tr>
			<tr>
				<td>Quisque </td><td>Maecenas a lorem augue</td><td>Etiam auctor diam pellentesque ulla ac massa at dolor</td><td>Maecenas a lorem augue</td>
			</tr>
			<tr>
				<td>Quisque </td><td>Maecenas a lorem augue</td><td>Etiam auctor diam pellentesque ulla ac massa at dolor</td><td>Maecenas a lorem augue</td>
			</tr>
			<tr>
				<td>Quisque </td><td>Maecenas a lorem augue</td><td>Etiam auctor diam pellentesque ulla ac massa at dolor</td><td>Maecenas a lorem augue</td>
			</tr>
		</table>

		<table class="right-table">
			<tr class="first-right">
				<td>TR TITLE</td><td>TR TITLE</td><td>TR TITLE</td><td>TR TITLE</td>
			</tr>
			<tr>
				<td>Quisque </td><td>Maecenas a lorem augue</td><td>Etiam auctor diam pellentesque ulla ac massa at dolor</td><td>Maecenas a lorem augue</td>
			</tr>
			<tr>
				<td>Quisque </td><td>Maecenas a lorem augue</td><td>Etiam auctor diam pellentesque ulla ac massa at dolor</td><td>Maecenas a lorem augue</td>
			</tr>
			<tr>
				<td>Quisque </td><td>Maecenas a lorem augue</td><td>Etiam auctor diam pellentesque ulla ac massa at dolor</td><td>Maecenas a lorem augue</td>
			</tr>
			<tr>
				<td>Quisque </td><td>Maecenas a lorem augue</td><td>Etiam auctor diam pellentesque ulla ac massa at dolor</td><td>Maecenas a lorem augue</td>
			</tr>
		</table>
	</div>
</div>
</div>
<!-- 尾部 -->
<div class="foot">
	
	<div class="path003"></div>

	<div class="foot-cont">
			<div class="fo-co-left">
				<p><span class="modu">MODUS</span><span class="vers">VERSUS</span></p>
				<p class="mo-ver">djs fdsj fjsjbfjd sqw cifdhl sdw9jf sjsdf sjd fdpocn isdqdpos dfa fed0wjds vmnsdf sdkjosf csfei cj jwd of askdsnc e jdwsf jskfwqsa vjdfjqaxs kjsdfj </p>
				<div class="fon-sty"><p>Phone:<span>182 5648 4545</span></p>
				<p>
					e-mail:<span>info@modu.versus</span>
				</p></div>
			</div>
			<div class="fo-co-center1"><h2>Company</h2>
			<a href="#">> About</a>
			<a href="#">> FAQ</a>
			<a href="#">> Contact</a>
			<a href="#">> Terrrs</a>
			<a href="#">> Privacy</a>
			<a href="#">> Testmonials</a></div>
			<div class="fo-co-center2"><h2>Community</h2>
			<a href="#">> Blog</a>
			<a href="#">> Forum</a>
			<a href="#">> Support</a>
			<a href="#">> Newsletter</a></div>
			<div class="fo-co-right">
				<p class="from-the"><span>from the </span>BLOG</p>
				<div class="img"><img src="img/img.png"><span>sdjf dfjf osdfj sodfxcm jf mclkds mvkd</span><h6>26 May,2013</h6></div>
				<div class="img"><img src="img/img.png"><span>d vkfdjf odsf dfj vce9 vcdikvdf vdk dkf kp</span><h6>26 May,2013</h6></div>
			</div>	
	</div>
	<div class="footer">
		<p>2013 ModusVersus</p>
		<div><a href="#"><img src="img/face.png"></a>
		<a href="#"><img src="img/google.png"></a>
		<a href="#"><img src="img/ytube.png"></a>
		<a href="#"><img src="img/wifi.png"></a></div>
	</div>
</div>
<script type="text/javascript" src="content.js"></script>
</body>
</html>